import React, { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { View, Text, Image } from '@tarojs/components'
import './cookbook.scss'

export default function index() {
  const list = useSelector(state => state.index.list)

  useEffect(() => {
    
  }, [])

  return (
    <View className="top10-wrap">
      <View className="top10-title">
        <Text>精品好菜</Text>
      </View>
      <View className="top10-list">
        {
          list.slice(0, 10).map(li => {
            return (
              <View className="top10-list__item">
                <View className="top10-list__item-image-wraper">
                  <Image className="top10-list__item-image" src={li.img} ></Image>
                </View>
                <View className="top10-list__item-desc">
                  <Text className="top10-list__item-title">
                    {li.name}
                  </Text>
                  <Text className="top10-list__item-subtitle">
                    {li.all_click}浏览 {li.favorites}收藏
                  </Text>
                </View>
              </View>
            )
          })
        }
      </View>
    </View>
  )
}